import 'package:app01/views/authenticate/login_controller.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class LoginView extends GetView<LoginController> {
  const LoginView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LoginController>(
        autoRemove: false,
        init: LoginController(),
        builder: (_) {
          return Scaffold(
              body: Stack(
            children: <Widget>[
              Builder(
                builder: (BuildContext ctx) {
                  return Stack(
                    children: [
                      Positioned(
                          left: 0,
                          top: 0,
                          right: 0,
                          bottom: 0,
                          child: Image.asset(
                            'images/assets/login_bg.png',
                            fit: BoxFit.fill,
                          )),
                      Positioned(
                          left: 0,
                          right: 0,
                          height: 51,
                          top: 85,
                          child: Image.asset(
                            'images/assets/logo_blue.png',
                          )),
                      Positioned(
                          left: 8.5,
                          right: 8.5,
                          bottom: 0,
                          top: 177,
                          child: Image.asset(
                            'images/assets/bottomBg.png',
                            fit: BoxFit.fill,
                          )),
                      Positioned(
                          left: 8.5,
                          right: 8.5,
                          bottom: 0,
                          top: 120,
                          child: _contentView()),
                    ],
                  );
                },
              ),
            ],
          ));
        });
  }

  Widget _contentView() {
    return Obx(() => ListView(
          children: [
            Container(
                margin: const EdgeInsets.only(top: 15),
                width: 240,
                height: 30,
                child: Stack(
                  children: [
                    Positioned(
                        left: ScreenUtil().setWidth(68),
                        right: ScreenUtil().setWidth(68),
                        height: 30,
                        child: Image.asset(
                          'images/assets/button_bg.png',
                        )),
                    Positioned(
                        left: ScreenUtil().setWidth(71),
                        width: ScreenUtil().setWidth(116),
                        top: 3,
                        height: 24,
                        child: GestureDetector(
                          onTap: () {
                            controller.changeItem(0);
                          },
                          child: Container(
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                color: controller.isLogin.value
                                    ? Colors.blue
                                    : Colors.transparent,
                                borderRadius: BorderRadius.circular(12)),
                            child: Text(
                              '登录',
                              style: TextStyle(
                                  fontSize: 12.6,
                                  color: controller.isLogin.value
                                      ? Colors.white
                                      : const Color.fromRGBO(50, 118, 245, 1),
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                        )),
                    Positioned(
                        right: ScreenUtil().setWidth(71),
                        width: ScreenUtil().setWidth(116),
                        top: 3,
                        height: 24,
                        child: GestureDetector(
                            onTap: () {
                              controller.changeItem(1);
                            },
                            child: Container(
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: !controller.isLogin.value
                                      ? Colors.blue
                                      : Colors.transparent,
                                  borderRadius: BorderRadius.circular(12)),
                              child: Text('注册',
                                  style: TextStyle(
                                      fontSize: 12.6,
                                      color: !controller.isLogin.value
                                          ? Colors.white
                                          : const Color.fromRGBO(
                                              50, 118, 245, 1),
                                      fontWeight: FontWeight.bold)),
                            )))
                  ],
                )),
            if (controller.isLogin.value) _loginView(),
            if (!controller.isLogin.value) _registView()
          ],
        ));
  }

  Widget _loginView() {
    return Column(
      children: [
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('手机', '请输入手机号码'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('密码', '请输入密码'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: Image.asset(
            'images/assets/person.png',
          ),
        ),
        Image.asset(
          'images/assets/service.png',
        )
      ],
    );
  }

  Widget _registView() {
    return Column(
      children: [
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('推荐人', '请输入手机号码'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('*会员账号', '2-20位数字和英文组成'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('*会员密码', '6-20位至少包含2种不同字符'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('*确认密码', '两次密码必须一致'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('*真实姓名', '必须与提款的银行卡账户相同'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('QQ', '请输入你的QQ号码'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('微信', '请输入你的微信号'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('Skype', '非必填项'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('邮箱', '请输入你的邮箱号'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('收款银行', '点击进行选择'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('开户行名称', '收款银行开户支行名称'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('收款银行卡号', '收款银行户支行名称'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('*自定义问题', '点击进行选择'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('*问题答案', '答案4-20字符之间'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('取款密码', '6位数字'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('*邀请码', '请输入邀请码'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 23, left: 24, right: 24),
          child: _item('手机号码', '请输入您的手机号码'),
        ),
        _agreement(),
        _registButton(),
      ],
    );
  }

  Widget _item(String title, String hintText) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
              color: Color.fromRGBO(11, 33, 59, 1),
              fontSize: 14,
              fontWeight: FontWeight.bold),
        ),
        Container(
          height: 40,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              border: Border.all(
                  width: 1, color: const Color.fromRGBO(47, 115, 245, 0.2))),
          child: TextField(
            decoration: InputDecoration(
              contentPadding: const EdgeInsets.only(
                  left: 10, top: 0, bottom: 10, right: 10),
              hintText: hintText,
              border: InputBorder.none,
            ),
          ),
        )
      ],
    );
  }

  //协议相关
  Widget _agreement() {
    return Container(
      margin: const EdgeInsets.only(top: 30, left: 24, right: 24),
      child: Row(children: <Widget>[
        GestureDetector(
          onTap: () => {},
          child: Image.asset("images/assets/agreement_sel.png"),
        ),
        const Text(
          " 我已届满合法年龄，且同意各项",
          style: TextStyle(),
        ),
        GestureDetector(
          onTap: () => {},
          child: const Text(
            " 开户协议 ",
            style: TextStyle(color: Colors.blue),
          ),
        )
      ]),
    );
  }

  Widget _registButton() {
    return Container(
      margin: const EdgeInsets.only(top: 30),
      width: 244,
      height: 36,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage("images/assets/button_login.png"))),
      child: GestureDetector(
        onTap: () => {},
        child: const Text(
          '注册',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}
